<div class="umb-panel" ng-controller="Umbraco.Dialogs.TreePickerController">
    <div class="umb-panel-header" ng-hide="startNodeId > -1">
        <div class="umb-el-wrap umb-panel-buttons">
            <div class="form-search">
                <i class="icon-search"></i>
                <input type="text"
                    ng-model="term"
                    class="umb-search-field search-query"
                    placeholder="Search..."
                    on-keyup="performSearch()">
            </div>
        </div>
    </div>
    <div class="umb-panel-body with-footer" ng-class="{'no-header':startNodeId > -1}">
        <div class="tab-content umb-control-group">

            <!-- Search results -->
            <div ng-show="showSearch">
                <ul class="umb-tree">
                    <li class="root">
                        <ul class="umb-search-group">
                            <li ng-repeat="result in results">
                                <div style="padding-left: 20px">
                                    <a ng-class="{first:$first}" ng-click="selectResult(result)">
                                        <i class="icon umb-tree-icon sprTree {{result.icon}}"></i>
                                        {{result.name}}
			                            <small class="search-subtitle" ng-show="result.subTitle">{{result.subTitle}}</small>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

            <div ng-hide="showSearch">
                <umb-tree
                    section="{{section}}"
                    treealias="{{treeAlias}}"
                    hideheader="{{hideHeader}}"
                    hideoptions="true"
                    isdialog="true"
                    customtreeparams="{{customTreeParams}}"
                    eventhandler="dialogTreeEventHandler">
				</umb-tree>
            </div>
        </div>
    </div>

    <div class="umb-panel-footer">
        <div class="umb-el-wrap umb-panel-buttons">
            <div class="btn-toolbar umb-btn-toolbar pull-right">

                <a href ng-click="close()" class="btn btn-link">
                    <localize key="general_cancel">Cancel</localize>
                </a>

                <button
                    class="btn btn-primary"
                    ng-show="dialogOptions.multiPicker"
                    ng-click="multiSubmit(dialogData.selection)">
                    <localize key="buttons_select">Select</localize>
                    ({{dialogData.selection.length}})
                </button>

            </div>
        </div>
    </div>

</div>
